<!DOCTYPE html>
<html>

<head>
    <!-- 背景测试 -->
    <meta charset="utf-8">
    <title>背景图片测试</title>


    <style>
        .bg {
            height: 200px;
            width: 200px;
            display: inline-block;
        }

        .bg1{
            background: linear-gradient(30deg, red, yellow, blue);
        }

        .bg2{
            background: radial-gradient(red, green, blue);
        }

        .bg3{
            background: repeating-linear-gradient(red, yellow 10%, green 20%); 
        }

        .bg4{
            background: repeating-radial-gradient(red, yellow 10%, green 15%);
        }
    </style>

</head>

<body>
    <div class="bg bg1" ></div>
    <div class="bg bg2" ></div>
    <div class="bg bg3" ></div>
    <div class="bg bg4" ></div>


</body>

</html>